<template>
	<view class="bg-gray">
		<view class="wrapper width">
			<carousel :res="carouselImage" class="bgshare" height='380' />
			<view class="bg-white flex-row-between main">
				<view class="leftimg" @click="jump('/pages/food/dayfood')">
					<image src="https://www.haopengsong.xyz/static/food/icon1.png" class="img"></image>
					<view  class="leftfont"> 
						<view class="title font16 bold flex-row-start">
							日常三餐
							<image src="https://www.haopengsong.xyz/static/food/arr.png" 
								mode="widthFix" 
								class="iconarr">
							</image>
						</view>
						<view class="font12 color6">快速订餐</view>
					</view>
				</view>
				<view class="rightimg">
					<view class="rightdiv" @click="jump('/pages/food/appoint')">
						<image src="https://www.haopengsong.xyz/static/food/icon2.png" 
							class="img"></image>
						<view class="rightfont">
							<view class="font14 bold flex-row-start">
								预约点餐
								<image src="https://www.haopengsong.xyz/static/food/arr.png"
									mode="widthFix" 
									class="iconarr">
								</image>
							</view>
						</view>
					</view>
					
					<view class="rightdiv" @click="jump('/pages/food/specialmeals')">
						<image src="https://www.haopengsong.xyz/static/food/icon3.png" 
							class="img"></image>
						<view class="rightfont">
							<view class="font14 bold flex-row-start">
								特殊餐食
								<image src="https://www.haopengsong.xyz/static/food/arr.png"
									mode="widthFix" 
									class="iconarr">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
import storage from "@/utils/storage.js"; //缓存
export default {
	data() {
		return {
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/food.jpg'}
				//{ name:'https://www.haopengsong.xyz/static/food/bg.png'}
			]
		};
	},
	components: {
		carousel: tpl_banner
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/**去除scroll-view的滚动条*/
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
.leftimg{
	width: 48%;
	height: 158px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.main{
	padding: 12px;
	border-radius: 12px;
}
.img,.leftfont{
		width: 100%;
		height: 158px;
		left: 0;
		top:0;
		z-index: 2;
		position: absolute;
	}
	.font12{
		padding: 8px 0;
	}
	.goyuyue{
		background-color: #499C43;
		width: 64px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		color: #fff;
		font-size: 12px;
		border-radius: 22px;
	}
	.leftfont{
		z-index: 3;
		left: 10px;
		top: 20px;
	}
.rightimg{
	width: 48%;
	height: 158px;
	.rightdiv{
		position: relative;
		height: 75px;
		.img,.rightfont{
			height: 75px;
			left: 0;
			top:0;
			z-index: 2;
			position: absolute;
			
		}
		.rightfont{
			z-index: 3;
			left: 10px;
			height: 30px;
			top: 27px;
		}
	}
	.rightdiv:last-child{
		margin-top: 10px;
	}
}
.type{
	border-radius: 12px;
	padding:12px;
	margin-top: 15px;
	.typeitem{
		flex: 0 0 21%; 
		text-align: center;
		margin-top: 10px;
		.iconimg{
			width: 40px;
			height: 40px;
			display: inline-block;
		}
	}
}
.iconarr{
	width: 22px;
	height: 22px;
	margin-left: 10px;
}
</style>